<template>
  <view class="savepadding">

    <view class="item" style="padding: 20rpx;">

      <u-form :model="addbean" ref="uform" label-width="auto">

        <view class="">
          <u-icon name="order" color="#1573FF" label="渠道商信息" label-color="#333333"></u-icon>
        </view>

        <u-form-item label="上传身份证">
        </u-form-item>

        <u-form-item>
          <view class="uploadBg">

            <lr-upload tag="2" width="320rpx" height="200rpx" uploadType="2" ref="upload1" objType="17"
                       addBtnImage="../../static/common/addBtn.png" @on-change="uploadOnChange"></lr-upload>
          </view>
        </u-form-item>

        <u-form-item label="渠道商名称" required borderBottom>
          <u-input v-model="addbean.channelName" inputAlign="right" border="none"
                   placeholder="请输入渠道商名称">
          </u-input>
        </u-form-item>

        <u-form-item label="身份证号" borderBottom>
          <u-input v-model="addbean.cardNo" inputAlign="right" border="none"
                   placeholder="请输入身份证号">
          </u-input>
        </u-form-item>


        <!--				<u-form-item label="法人名称" borderBottom>-->
        <!--					<u-input v-model="addbean.corp" inputAlign="right" border="none" placeholder="请输入法人名称">-->
        <!--					</u-input>-->
        <!--				</u-form-item>-->

        <u-form-item label="详细地址" borderBottom>
          <u-input v-model="addbean.addrDetail" inputAlign="right" border="none"
                   placeholder="请输入详细地址">
          </u-input>
        </u-form-item>

        <u-form-item label="上传银行卡">
        </u-form-item>

        <u-form-item>
          <view class="uploadBg">
            <lr-upload tag="1" width="320rpx" height="200rpx" uploadType="2" ref="upload2"
                       addBtnImage="../../static/common/addBtn.png" @on-change="uploadOnChange"></lr-upload>
          </view>
        </u-form-item>

        <u-form-item label="银行卡号" borderBottom>
          <u-input v-model="addbean.bankCardNo" inputAlign="right" border="none" type="number"
                   placeholder="请输入银行卡号">
          </u-input>
        </u-form-item>

        <u-form-item label="联系人" borderBottom>
          <u-input v-model="addbean.contacts" inputAlign="right" border="none"
                   placeholder="请输入联系人">
          </u-input>
        </u-form-item>

        <u-form-item label="联系电话" borderBottom>
          <u-input v-model="addbean.phone" inputAlign="right" border="none" maxlength="11" type="number"
                   placeholder="请输入联系电话">
          </u-input>
        </u-form-item>

        <u-form-item label="业务员" @click="selRes" borderBottom>
          <u-input v-model="addbean.salesmanName" inputAlign="right" disabled disabledColor="#ffffff"
                   border="none" placeholder="请选择业务员">
          </u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="合作状态" @click="showCoper=true" borderBottom>
          <u-input v-model="addbean.consociationStatusName" inputAlign="right" disabled disabledColor="#ffffff"
                   border="none" placeholder="请选择合作状态">
          </u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="账单类型" @click="showBill=true" borderBottom>
          <u-input v-model="addbean.billTypeName" inputAlign="right" disabled disabledColor="#ffffff"
                   border="none" placeholder="请选择账单类型">
          </u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="渠道类型" @click="showChl=true" borderBottom>
          <u-input v-model="addbean.chlTypeName" inputAlign="right" disabled disabledColor="#ffffff"
                   border="none" placeholder="请选择渠道类型">
          </u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>


        <u-form-item>
          <view class="car-photo" style="padding: 0 0 20rpx; display: block;font-size: 30rpx;color: #333;">
            渠道附件
          </view>
          <lr-upload ref="upload3" tag="3" objType="18" @on-change="uploadOnChange"></lr-upload>

  <!--        <view style="margin: 20rpx;display: flex;align-items: center;justify-content: space-between;"-->
  <!--              v-for="(pitem, pindex) in pdflist" :key="pindex" class="pdf-item">-->
  <!--          <text style="font-size: 26rpx;color: #333;">{{ pitem.nameFile || pitem.name_file }}</text>-->
  <!--          <text style="color: #1573FF;font-size: 26rpx;" @click="viewpdf(pitem)">查看</text>-->
  <!--        </view>-->

        </u-form-item>
      </u-form>

    </view>

    <!--		<view class="item" style="padding: 20rpx;">-->

    <!--			<u-form :model="addbean" ref="uform" label-width="auto">-->

    <!--				<view class="">-->
    <!--					<u-icon name="order" color="#1573FF" label="联系人" label-color="#333333"></u-icon>-->
    <!--				</view>-->
    <!--			</u-form>-->
    <!--		</view>-->

    <!--		<view class="item" style="padding: 20rpx;">-->

    <!--			<u-form :model="addbean" ref="uform" label-width="auto">-->

    <!--				<view class="">-->
    <!--					<u-icon name="order" color="#1573FF" label="财务信息" label-color="#333333"></u-icon>-->
    <!--				</view>-->

    <!--				<u-form-item label="开户行" borderBottom>-->
    <!--					<u-input v-model="addbean.bankName" inputAlign="right" border="none"-->
    <!--						placeholder="请输入开户行">-->
    <!--					</u-input>-->
    <!--				</u-form-item>-->

    <!--				<u-form-item label="开户行账号" borderBottom>-->
    <!--					<u-input v-model="addbean.bankAccount" inputAlign="right" border="none" type="number"-->
    <!--						placeholder="请输入开户行账号">-->
    <!--					</u-input>-->
    <!--				</u-form-item>-->

    <!--				<u-form-item label="纳税识别号" >-->
    <!--					<u-input v-model="addbean.taxpayerId" inputAlign="right" border="none"-->
    <!--						placeholder="请输入纳税识别号">-->
    <!--					</u-input>-->
    <!--				</u-form-item>-->
    <!--			</u-form>-->
    <!--		</view>-->

    <!--		<view class="item" style="padding: 20rpx;">-->

    <!--			<u-form :model="addbean" ref="uform" label-width="auto">-->

    <!--				<view class="">-->
    <!--					<u-icon name="order" color="#1573FF" label="其他信息" label-color="#333333"></u-icon>-->
    <!--				</view>-->

    <!--				<u-form-item label="备注" borderBottom>-->
    <!--					<u-input v-model="addbean.memo" inputAlign="right" border="none"-->
    <!--						placeholder="请输入备注信息">-->
    <!--					</u-input>-->
    <!--				</u-form-item>-->

    <!--				<u-form-item>-->
    <!--					<view class="car-photo" style="padding: 0 0 20rpx; display: block;font-size: 30rpx;color: #333;">-->
    <!--						营业执照-->
    <!--					</view>-->
    <!--					<lr-upload ref="upload1" tag="1" objType="16" @on-change="uploadOnChange"></lr-upload>-->
    <!--				</u-form-item>-->

    <!--				<u-form-item>-->
    <!--					<view class="car-photo" style="padding: 0 0 20rpx; display: block;font-size: 30rpx;color: #333;">-->
    <!--						身份证照片-->
    <!--					</view>-->
    <!--					<lr-upload ref="upload2" tag="2" objType="17" @on-change="uploadOnChange"></lr-upload>-->
    <!--				</u-form-item>-->


    <!--			</u-form>-->
    <!--		</view>-->

    <!-- 业务负责人 -->
    <u-picker :show="showUsr" :columns="userList" keyName="username"
              @confirm="pickerConfim" @cancel="showUsr=false"></u-picker>

    <!-- 合作状态 -->
    <u-picker :show="showCoper" :columns="coperList" keyName="value"
              @confirm="coperConfim" @cancel="showCoper=false"></u-picker>

    <!-- 账单类型 -->
    <u-picker :show="showBill" :columns="billList" keyName="value"
              @confirm="billConfim" @cancel="showBill=false"></u-picker>

    <!-- 渠道类型 -->
    <u-picker :show="showChl" :columns="chlList" keyName="value"
              @confirm="chlConfim" @cancel="showChl=false"></u-picker>

    <view style="height: 100rpx;"></view>

    <view class="button-container">
      <button class="btn-item" @click="bottomClick(1)">提交</button>
    </view>

  </view>
</template>

<script>
import lrUpload from '../../components/global/lr-upload.vue'
import gljyDataPicker from "@/components/gljy-data-picker/gljy-data-picker.vue";
import {isVideo} from "@/common/calc";

export default {
  components: {
    lrUpload,
    gljyDataPicker
  },
  data() {
    return {
      id: '',
      selType: 0,
      showUsr: false,
      showCoper: false,
      showBill: false,
      showChl: false,
      userList: [],
      addbean: {
      },
      coperList: [[{
          value: '合作中',
          code: 1
        },
        {
          value: '已解除合作',
          code: 2
        },
        {
          value: '合作申请中',
          code: 3
        },
        {
          value: '取消合作',
          code: 4
        }
      ]],
      billList: [[{
          value: '无',
          code: 0
        },{
          value: '自然月计算',
          code: 1
        },
        {
          value: '自然月计算（可以配置）',
          code: 2
        },
        {
          value: '固定30日',
          code: 3
        },
        {
          value: '满月计算',
          code: 4
        }
      ]],
      chlList: [[{
          value: '企业',
          code: 1
        },
        {
          value: '个人',
          code: 2
        }
      ]],
    }
  },

  onLoad(op) {
    this.addbean.salesmanName = this.$store.state.user.userInfo.username;
    this.addbean.salesmanId = this.$store.state.user.userInfo.userId;

    this.addbean.consociationStatusName = this.coperList[0][0].value;
    this.addbean.consociationStatus = this.coperList[0][0].code;
    this.addbean.billTypeName = this.billList[0][0].value;
    this.addbean.billType = this.billList[0][0].code;
    this.addbean.chlTypeName = this.chlList[0][1].value;
    this.addbean.chlType = this.chlList[0][1].code;

    this.id = op.id;
    if (!uni.$u.test.isEmpty(this.id)) {
      uni.setNavigationBarTitle({
        title: '编辑渠道'
      })
      this.getOldData();
    } else {
      uni.setNavigationBarTitle({
        title: '新增渠道'
      })
    }

    this.getUsrList();

  },

  methods: {

    getUsrList() {
      this.$u.api.channelUsrLst().then(res => {

        this.userList = [res];
      })
    },

    //图片上传成功回调
    uploadOnChange(tag, resultList, resultObjList) {

      if (uni.$u.test.isEmpty(resultList)) {
        return
      }

      resultList = resultList.map(item => {
        // item = item.substring(this.baseImgUrl.length, item.length);
        return item
      })
      resultObjList = resultObjList.map(item => {
        // item.url = item.url.substring(this.baseImgUrl.length, item.url.length);
        return item
      })

      console.log(tag, resultList, resultObjList);
      switch (tag) {
        case '1': //银行卡
          this.addbean.bankCardImg = resultList[0];

          break

        case '2': //身份证
          this.addbean.idCardImg = resultList[0];

          break
        case '3': //其他
          this.addbean.channelfjList = resultObjList;
          break

      }
    },

    getOldData() {
      let that = this

      this.$u.api.channelDetail(this.id).then(
          res => {
            this.addbean = res;
            this.addbean.id = this.id;
            that.addbean.channelfjList = that.addbean.fjList

            that.$forceUpdate()

            setTimeout(() => {

              if (!uni.$u.test.isEmpty(that.addbean.idCardImg) && !uni.$u.test.isEmpty(that.$refs.upload1)) {

                that.$refs.upload1.fileList1 = [{
                      message: "",
                      size: 52363,
                      status: "success",
                      thumb: that.baseImgUrl() + that.addbean.idCardImg,
                      type: isVideo(that.addbean.idCardImg),
                      url: that.addbean.idCardImg
                    }]
              }
            }, 1000)

            setTimeout(() => {

              if (!uni.$u.test.isEmpty(that.addbean.bankCardImg) && !uni.$u.test.isEmpty(that.$refs.upload2)) {

                that.$refs.upload2.fileList1 = [{
                      message: "",
                      size: 52363,
                      status: "success",
                      thumb: that.baseImgUrl() + that.addbean.bankCardImg,
                      type: isVideo(that.addbean.idCardImg),
                      url: that.addbean.idCardImg
                    }]
              }
            }, 1000)

            setTimeout(() => {

              if (!uni.$u.test.isEmpty(that.addbean.channelfjList) && !uni.$u.test.isEmpty(that.$refs.upload3)) {

                that.$refs.upload3.fileList1 = that.addbean.channelfjList.filter(item => {
                  return 1== item.type_file||1==item.typeFile
                }).map(item => {
                    return {
                      ...item,
                      message: "",
                      size: 52363,
                      status: "success",
                      thumb: that.baseImgUrl() + item.url,
                      type: isVideo(item.url),
                      url: item.url
                    }
                })
              }
            }, 1000)

            that.addbean.consociationStatusName = that.coperList[0].find(item=>item.code==res.consociationStatus)&&that.coperList[0].find(item=>item.code==res.consociationStatus).value;
            that.addbean.consociationStatus = that.coperList[0].find(item=>item.code==res.consociationStatus)&&that.coperList[0].find(item=>item.code==res.consociationStatus).code;

            that.addbean.billTypeName = that.billList[0].find(item=>item.code==res.billType)&&that.billList[0].find(item=>item.code==res.billType).value;
            that.addbean.billType = that.billList[0].find(item=>item.code==res.billType)&&that.billList[0].find(item=>item.code==res.billType).code;

            that.addbean.chlTypeName = that.chlList[0].find(item=>item.code==res.chlType)&&that.chlList[0].find(item=>item.code==res.chlType).value;
            that.addbean.chlType = that.chlList[0].find(item=>item.code==res.chlType)&&that.chlList[0].find(item=>item.code==res.chlType).code;


          }
      );
    },

    selRes() {
      this.showUsr = true;
    },

    pickerConfim(e) {
      this.showUsr = false;

      console.log('选中了', e);

      this.addbean.salesmanName = e.value[0].username;
      this.addbean.salesmanId = e.value[0].userId;
    },

    coperConfim(e) {
      this.showCoper = false;

      console.log('选中了', e);

      this.addbean.consociationStatusName = e.value[0].value;
      this.addbean.consociationStatus = e.value[0].code;
    },

    billConfim(e) {
      this.showBill = false;

      console.log('选中了', e);

      this.addbean.billTypeName = e.value[0].value;
      this.addbean.billType = e.value[0].code;
    },

    chlConfim(e) {
      this.showChl = false;

      console.log('选中了', e);

      this.addbean.chlTypeName = e.value[0].value;
      this.addbean.chlType = e.value[0].code;
    },

    //底部按钮的点击事件
    bottomClick(type) {
      let that = this;

      // this.addbean.customerType = 0 == this.selType ? 2 : 1;

      if (this.$u.test.isEmpty(this.addbean.channelName)) {
        this.$u.toast('请输入渠道名称');
        return;
      } else {

        uni.showModal({
          title: '确定提交吗?',
          success(res) {

            if (res.confirm) {

              if (uni.$u.test.isEmpty(that.id)) {
                that.$u.api.addChannel(that.addbean).then(res => {

                  uni.$emit('addchannel', true)

                  uni.showToast({
                    icon: 'none',
                    title: '提交成功'
                  })

                  setTimeout(() => {
                    uni.navigateBack()
                  }, 1000)

                })
              } else {
                that.$u.api.editChannel(that.addbean).then(res => {

                  uni.$emit('addchannel', true)

                  uni.showToast({
                    icon: 'none',
                    title: '提交成功'
                  })

                  setTimeout(() => {
                    uni.navigateBack()
                  }, 1000)

                })
              }

            }
          }
        })


      }
    }
  }
}
</script>

<style lang="scss" scoped>
.step-bg {
  width: 100%;
  height: 113rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $xz-bgColor-write;

  text {
    width: 170rpx;
    text-align: center;
    line-height: 50rpx;
    border-radius: 8rpx;
    color: #333;
    font-size: 28rpx;
    border: #a7a7a7 1rpx solid;
  }
}

.uploadBg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 150rpx;

}

.licesson-upload {
  display: flex;
  align-items: center;
}

.u-form {
  margin: 10px;
  padding: 22rpx;
  background-color: $xz-bgColor-write;
}

.u-input {
  font-size: 24rpx;
}

.deptPicker {
  position: fixed;
  z-index: 9999;
}

.pic-content {
  display: flex;
  margin: 10rpx 0;

  .pic-item {
    // flex: 1;
    width: 300rpx;
    margin: 0 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    // image {
    // 	height: 200rpx;
    // 	width: 100%;
    // }

    text {
      margin-top: 20rpx;
      color: #333;
      font-size: 24rpx;
    }
  }
}
</style>
